<template>
	<el-col :span="24">
		<template v-if="typeCode === 'slide-1'">
			<form-diy-title-link-select ref="slide-1-form" :baseUrl="baseUrl" />
		</template>
		<template v-if="typeCode === 'picture'">
			<el-row v-for="(p, pi) in form.pictures" style="clear: both" :key="pi">
				<el-col :span="5">
					<el-form-item label="图片">
						<sc-upload-multiple ref="imgs" v-model="p.img" :baseUrl="baseUrl" title="选择图片" />
					</el-form-item>
				</el-col>
				<el-col :span="19">
					<el-row>
						<form-diy-link-select
							ref="picture-form"
							v-model:type_id="p.type_id"
							v-model:link="p.link"
						/>
					</el-row>
				</el-col>
			</el-row>
		</template>
		<template v-if="typeCode === 'announcement-1'">
			<form-diy-title-link-select ref="announcement-1-form" :is-show-img="false" />
		</template>
		<template v-if="typeCode === 'icon-list'">
			<el-row>
				<el-col :offset="1" :span="23"><div style="color: #F00">说明：每页个数最好是每行个数的倍数，本组件最多放两行图标，超过两行会出现滑动</div></el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="每行个数">
						<el-radio-group v-model="form.icons.num">
							<el-radio :label="3">3个</el-radio>
							<el-radio :label="4">4个</el-radio>
							<el-radio :label="5">5个</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="图标大小">
						<el-input-number v-model="form.icons.icon_size" controls-position="right" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="背景颜色">
						<el-color-picker v-model="form.icons.item_bg_color" />
					</el-form-item>
				</el-col>
			</el-row>
			<form-diy-title-link-select ref="icon-list-form" />
		</template>
		<template v-if="typeCode === 'goods-1'">
			<el-row>
				<el-col :span="6">
					<el-form-item label="商品总数">
						<el-input-number
							v-model="form.goods.num"
							controls-position="right"
							:min="0"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="排序方式">
						<el-select v-model="form.goods.sort_type" placeholder="请选择">
							<el-option
								v-for="item in goodsSortOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="商品分类">
						<el-cascader
							v-model="form.goods.cid"
							:options="shopCategorys"
							:props="{
								value: 'id',
								label: 'cat_name',
								emitPath: false
							}"
							placeholder="不选为全部"
							clearable
						/>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="是否分页">
						<el-switch
							v-model="form.goods.is_page"
							active-text="分页"
							inactive-text="不分页"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-show="form.goods.is_page">
					<el-form-item label="每页个数">
						<el-input-number v-model="form.goods.page_size" controls-position="right" />
					</el-form-item>
				</el-col>
			</el-row>
		</template>
		<template v-if="typeCode === 'goods-2'">
			<el-row>
				<el-col :span="8">
					<el-form-item label="排序方式">
						<el-select
							v-model="form.goods.sort_type"
							placeholder="请选择"
							@change="goods2Change"
						>
							<el-option
								v-for="item in goodsSortOptions2"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-button @click="openSelectDialogGoods">增加商品</el-button>
				</el-col>

				<el-col :span="24">
					<select-goods-table ref="selectGoodsTable" :isShowSortBtn="isShowSortBtn" />
				</el-col>
			</el-row>

			<select-dialog ref="selectDialog" @select="SelectDialogGoodsCb" />
		</template>
		<template v-if="typeCode === 'search-1' || typeCode === 'search-2'">
			<el-row>
				<el-col :span="24">
					<el-form-item label="文字说明">
						<el-input v-model="form.search.placeholder" placeholder="说明" />
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="typeCode === 'search-2'">
					<el-form-item label="滚动关键词">
						<sc-form-table :addTemplate="{ keyword: '' }" v-model="form.search.keywords">
							<template #default>
								<el-table-column width="350">
									<template #header>
										<div class="flex-align-center flex-start">关键词</div>
									</template>
									<template #default="scope">
										<el-input v-model="scope.row.keyword" placeholder="关键词" />
									</template>
								</el-table-column>
							</template>
						</sc-form-table>
					</el-form-item>
				</el-col>
			</el-row>
		</template>
	</el-col>
</template>

<script>
import FormDiyLinkSelect from "./formDiyLinkSelect.vue";
import FormDiyTitleLinkSelect from "./formDiyTitleLinkSelect.vue";
import SelectDialog from "./selectDialog.vue";
import SelectGoodsTable from "./selectGoodsTable.vue";
export default {
	name: "shop-diy-page-item-form-beneath",
	components: {
		SelectGoodsTable,
		SelectDialog,
		FormDiyTitleLinkSelect,
		FormDiyLinkSelect
	},
	props: {
		baseUrl: String
	},
	data() {
		return {
			dataMax: {
				"slide-1": 5,
				"announcement-1": 5,
				"icon-list": 20
			},
			typeCode: "",
			goodsSortOptions: [
				{
					value: "recommended",
					label: "推荐"
				},
				{
					value: "new",
					label: "新品"
				},
				{
					value: "comments",
					label: "评论数"
				},
				{
					value: "price-desc",
					label: "价格高到低"
				},
				{
					value: "price-asc",
					label: "价格低到高"
				}
			],
			goodsSortOptions2: [
				{
					value: "recommended",
					label: "推荐"
				},
				{
					value: "new",
					label: "新品"
				},
				{
					value: "comments",
					label: "评论数"
				},
				{
					value: "price-desc",
					label: "价格高到低"
				},
				{
					value: "price-asc",
					label: "价格低到高"
				},
				{
					value: "custom",
					label: "自定义排序"
				}
			],
			shopCategorys: [],
			goodsSelects: [],
			form: {
				pictures: [],
				icons: {
					num: 3,
					is_swiper: false,
					line_num: 2,
					item_bg_color: "#f5f5f5",
					icon_size: 100,
					photos: []
				},
				goods: {
					sort_type: "",
					cid: 0,
					is_page: true,
					page_size: 10
				},
				search: {
					placeholder: "请输入搜索关键词",
					keywords: []
				}
			},
			typeIdList: []
		};
	},
	computed: {
		isShowSortBtn() {
			if (this.typeCode !== "goods-2") {
				return false;
			}

			return this.form.goods.sort_type === "custom";
		}
	},
	mounted() {
		console.log(this.baseUrl);
		// 延迟为图片组件设置链接前缀
		setTimeout(() => {
			if (this.$refs.imgs) {
				this.$refs.imgs.map(item => {
					item.setBaseUrl(this.baseUrl);
				})
			}
		},500)
	},
	methods: {
		getBaseUrl() {
			/*const that = this;
			that.service.gdshop.attachment.getBaseUrl().then((res) => {
				that.baseUrl = res.base_url;
			});*/
		},
		typeIdChange(value) {
			console.log(value);
		},
		getTypeCode(_id) {
			for (var i = 0; i < this.typeIdList.length; i++) {
				for (var j = 0; j < this.typeIdList[i].children.length; j++) {
					if (this.typeIdList[i].children[j].id == _id) {
						return this.typeIdList[i].children[j].type_code;
					}
				}
			}
			return "";
		},
		addPictureRow(_num) {
			let tmps = [];
			for (var i = 0; i < _num; i++) {
				tmps.push({
					img: "",
					type_id: "",
					link: ""
				});
			}

			return tmps;
		},
		changeTypeCode(_typeCode) {
			switch (_typeCode) {
				case "picture-4":
					this.form.pictures = this.addPictureRow(4);
					this.typeCode = "picture";
					break;
				case "picture-2":
					this.form.pictures = this.addPictureRow(2);
					this.typeCode = "picture";
					break;
				case "picture-1":
					this.form.pictures = this.addPictureRow(1);
					this.typeCode = "picture";
					break;
				case "slide-1":
				case "announcement-1":
				case "icon-list":
					this.typeCode = _typeCode;
					this.$nextTick(() => {
						this.$refs[_typeCode + "-form"].initData(this.dataMax[_typeCode], [
							{
								img: "",
								title: "",
								type_id: "",
								link: ""
							}
						]);
					});
					break;
				case "goods-1":
					this.typeCode = _typeCode;
					this.getShopCategorys();
					this.form.goods.sort_type = "";
					break;
				case "goods-2":
					this.typeCode = _typeCode;
					this.form.goods.sort_type = "";
					break;
				default:
					this.typeCode = _typeCode;
					break;
			}
			this.getBaseUrl();
			console.log(this.typeCode);
		},
		getShopCategorys() {
			this.$API.shop.category
				.list({
					type_str: "shop"
				})
				.then((res) => {
					if (res.code === 0) {
						this.shopCategorys = this.$TOOL.deepTree(res.data, "parent_id");
					}
					else {
						this.$message.error(res.message);
					}
				});
		},
		getData() {
			switch (this.typeCode) {
				case "picture":
					return {
						pictures: this.form.pictures
					};
				case "icon-list":
					this.form.icons.photos = this.$refs[this.typeCode + "-form"].getData().dataList;
					return this.form.icons;
				case "announcement-1":
				case "slide-1":
					return this.$refs[this.typeCode + "-form"].getData();
				case "goods-1":
				case "goods-2":
					this.form.goods.goods_ids = this.goodsSelects.map(item => {
						return item.id
					}).join(',');
					console.log(this.form.goods);
					return this.form.goods;
				case "search-1":
				case "search-2":
					return this.form.search;
				default:
					return this.form;
			}
		},
		setEditData(_typeCode, _data) {
			switch (_typeCode) {
				case "picture-4":
				case "picture-2":
				case "picture-1":
					this.form.pictures = _data.pictures;
					this.typeCode = "picture";
					break;
				case "slide-1":
				case "announcement-1":
					this.typeCode = _typeCode;
					this.$nextTick(() => {
						this.$refs[_typeCode + "-form"].initData(this.dataMax[_typeCode], _data.dataList);
					});
					break;
				case "icon-list":
					this.typeCode = _typeCode;
					this.form.icons = _data;
					this.$nextTick(() => {
						this.$refs[_typeCode + "-form"].initData(this.dataMax[_typeCode], this.form.icons.photos);
					});
					break;
				case "goods-1":
				case "goods-2":
					this.form.goods = _data;
					if (this.form.goods.goods_ids) {
						this.getGoodsData(this.form.goods.goods_ids);
					}
					this.typeCode = _typeCode;
					break;
				case "search-1":
				case "search-2":
					this.form.search = _data;
					this.typeCode = _typeCode;
					break;
				default:
					this.typeCode = _typeCode;
					break;
			}
			this.getBaseUrl();
			console.log(this.typeCode);
		},
		getGoodsData(goodsIds) {
			const that = this;
			this.$API.shop.goods
				.get_diy_goods_data({		goods_ids:	goodsIds	})
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						let resData = res.data;
						that.SelectDialogGoodsCb(resData);
					}
					else {
						that.$message.error(res.message);
					}
				});
		},
		SelectDialogGoodsCb(selects) {
			// console.log(selects);
			this.goodsSelects = this.$TOOL.arrayUnique(this.goodsSelects.concat(selects), "id");
			// console.log(this.goodsSelects);
			this.$refs["selectGoodsTable"].initData("show", this.baseUrl, this.goodsSelects);
		},
		openSelectDialogGoods() {
			console.log("openSelectDialogGoods");
			this.$refs["selectDialog"].create();
		},
		goods2Change(e) {
			console.log(e);
		}
	}
};
</script>
